<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="stylesheet" href="./css/checkdeal.css">
  <link rel="stylesheet" href="./css/dealDetail.css">
  <link rel="stylesheet" href="./css/font-awesome.min.css">
</head>
<body>
  <div id="appLoading">
   <img src="./images/loading.gif" width="50px" height="50px">
   <div class="loading-text">加载中......</div>
  </div>
  <div id="DealDetail" style="display:none">
    <mt-header title="确认订单">
      <mt-button onclick="javascript:history.back(-1);" icon="back">返回</mt-button>
    </mt-header>
    <div class="del-det-content">
      <mt-cell v-if="address == null" title="收货地址" is-link value="点击添加收货地址">
        <img slot="icon" src="./images/icon/Ecommerce-45.png" width="24" height="24">
      </mt-cell>
      <mt-cell
      v-if="address != null"
      class="che-adres"
      :label="'收货地址： ' + address.adrs"
      :title="'收货人：' + address.name + address.phone "
      is-link>
    </mt-cell>
    <div style="height:20px"></div>
    <div class="che-pros-deal">
      <div class="che-pros" v-for="pro in products">
        <el-row :gutter="10">
          <el-col :span="5">
            <div class="che-pros-img">
              <img :src="pro.src" alt="">
            </div>
          </el-col>
          <el-col :span='19' class="che-pros-content">
            <div class="che-pros-title">{{pro.title}}</div>
            <div class="che-pros-size">{{pro.size}}</div>
            <div class="che-pros-price">{{pro.addmoney}}</div>
            <div class="che-pros-number">{{pro.number}}</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <mt-cell title="订单金额">
      <span style="color:red;font-weight:bolder"> ￥{{dealsDetails.payDeal}}</span>
    </mt-cell>
    <mt-cell title="商品金额">
      <span>￥{{dealsDetails.proMoney}}</span>
    </mt-cell>
    <mt-cell title="邮费" value='"￥" + dealsDetails.mails'>
      <span>￥{{dealsDetails.mails}}</span>
    </mt-cell>
    <mt-cell class="servers" title="联系客服" label="工作时间：9：00-20：00">
      <span>{{dealsDetails.phone}}</span>
    </mt-cell>
    </div>

    <div class="del-det-btn">
      <mt-button type="primary" size="small">退款退货</mt-button>
      <mt-button type="primary" size="small">删除订单</mt-button>
      <mt-button type="primary" size="small">物流查询</mt-button>
    </div>
  </div>
</body>
  <script src="./js/vue.min.js"></script>
  <script src="./js/element-ui.js" charset="utf-8"></script>
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script type="text/javascript">
  var app = new Vue({
      el: "#DealDetail",
      data: function(){
        return {
          address: {
            id: 1,
            name: "Mee J Lee",
            adrs: "浙江省嘉兴时嘉善区XXXXX",
            phone: 1927637275
          },
          products: [
            {
              id: 0,
              src: "./images/goods/logo.png",
              title: "Apple AirPods 蓝牙无线耳机 ",
              price: 324,
              number: 12,
              size: "50ml",
              stocket: 17,
              addmoney: 3888
            },
            {
              id: 1,
              src: "./images/goods/logo.png",
              title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
              price: "324",
              number: "12",
              size: "50ml",
              stocket: 13,
              addmoney: 3888
            },
            {
              id: 2,
              src: "./images/goods/logo.png",
              title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
              price: "324",
              number: "12",
              size: "50ml",
              stocket: 19,
              addmoney: 3888
            },
            {
              id: 3,
              src: "./images/goods/logo.png",
              title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
              price: "324",
              number: "12",
              size: "50ml",
              stocket: 24,
              addmoney: 3888
            },
            {
              id: 4,
              src: "./images/goods/logo.png",
              title: "Apple AirPods 蓝牙无线耳机 适用于iPhone7/8/X手机耳机",
              price: "324",
              number: "12",
              size: "50ml",
              stocket: 24,
              addmoney: 3888
            }
          ],
          dealsDetails:{
            payDeal: 180,
            mails: 0,
            proMoney: 180,
            phone: '223-183-393'
          }
        }
      },
      mounted(){
       document.getElementById('DealDetail').style.display = 'block';
       document.getElementById('appLoading').style.display = 'none';
      }
    })
  </script>
</html>
